<template>
  <div class="container">
    <div class="community-header">
      <h2>社区交流</h2>
      <button class="create-post-btn" @click="handleCreatePost">发布帖子</button>
    </div>

    <div class="post-filters">
      <button 
        v-for="filter in filters" 
        :key="filter.value"
        class="filter-btn"
        :class="{ active: currentFilter === filter.value }"
        @click="handleFilterChange(filter.value)"
      >
        {{ filter.label }}
      </button>
    </div>

    <div class="post-list">
      <div v-for="post in posts" :key="post.id" class="post-card">
        <div class="post-header">
          <div class="post-user">
            <img :src="post.userAvatar" alt="用户头像" class="post-avatar">
            <div class="post-user-info">
              <h4>{{ post.username }}</h4>
              <span>{{ post.userRole }}</span>
            </div>
          </div>
          <span class="post-date">{{ post.date }}</span>
        </div>
        <div class="post-content">
          <h3>{{ post.title }}</h3>
          <p>{{ post.content }}</p>
          <img v-if="post.image" :src="post.image" alt="帖子图片" class="post-image">
          <div class="post-tags">
            <span v-for="tag in post.tags" :key="tag" class="post-tag">#{{ tag }}</span>
          </div>
        </div>
        <div class="post-actions">
          <div class="post-action" @click="handleLike(post)">
            <img src="@/assets/like-icon.png" alt="点赞" width="20">
            <span>{{ post.likes }}</span>
          </div>
          <div class="post-action" @click="handleComment(post)">
            <img src="@/assets/comment-icon.png" alt="评论" width="20">
            <span>{{ post.comments }}</span>
          </div>
          <div class="post-action" @click="handleShare(post)">
            <img src="@/assets/share-icon.png" alt="分享" width="20">
            <span>分享</span>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<style scoped>
:root {
  --primary-color: #333333;
  --secondary-color: #4CAF50;
  --accent-color: #FF9800;
  --light-color: #f8f8f8;
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: 'Arial', sans-serif;
}

.container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 20px;
}

.community-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin: 40px 0 30px;
}

.community-header h2 {
  font-size: 28px;
  color: var(--primary-color);
}

.create-post-btn {
  display: inline-block;
  padding: 12px 25px;
  background-color: var(--secondary-color);
  color: white;
  border: none;
  border-radius: 10px;
  font-size: 16px;
  font-weight: bold;
  cursor: pointer;
  transition: all 0.3s;
  text-decoration: none;
}

.create-post-btn:hover {
  background-color: #3e8e41;
  transform: translateY(-2px);
}

.post-filters {
  display: flex;
  gap: 15px;
  margin-bottom: 30px;
}

.filter-btn {
  padding: 8px 15px;
  background-color: white;
  border: 1px solid #ddd;
  border-radius: 20px;
  cursor: pointer;
  transition: all 0.3s;
}

.filter-btn:hover, .filter-btn.active {
  background-color: var(--secondary-color);
  color: white;
  border-color: var(--secondary-color);
}

.post-list {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.post-card {
  background-color: white;
  border-radius: 15px;
  padding: 25px;
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
}

.post-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 15px;
}

.post-user {
  display: flex;
  align-items: center;
  gap: 10px;
}

.post-avatar {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  object-fit: cover;
}

.post-user-info h4 {
  font-size: 16px;
  margin-bottom: 5px;
}

.post-user-info span {
  font-size: 14px;
  color: #999;
}

.post-date {
  font-size: 14px;
  color: #999;
}

.post-content h3 {
  font-size: 20px;
  margin-bottom: 15px;
  color: var(--primary-color);
}

.post-content p {
  color: #555;
  line-height: 1.6;
  margin-bottom: 20px;
}

.post-image {
  width: 100%;
  border-radius: 10px;
  margin-bottom: 20px;
  max-height: 400px;
  object-fit: cover;
}

.post-tags {
  display: flex;
  gap: 10px;
  margin-bottom: 20px;
}

.post-tag {
  padding: 5px 12px;
  background-color: rgba(76, 175, 80, 0.1);
  color: var(--secondary-color);
  border-radius: 15px;
  font-size: 12px;
}

.post-actions {
  display: flex;
  gap: 20px;
  border-top: 1px solid #eee;
  padding-top: 15px;
}

.post-action {
  display: flex;
  align-items: center;
  gap: 5px;
  color: #666;
  cursor: pointer;
  transition: color 0.3s;
}

.post-action:hover {
  color: var(--secondary-color);
}
</style>

<script setup>
import { ref, onMounted } from 'vue'
import { useRouter } from 'vue-router'
import { ElMessage } from 'element-plus'
import apiService from '@/services/api.service'

const router = useRouter()
const posts = ref([])
const loading = ref(false)
const currentFilter = ref('all')

const filters = [
  { label: '全部', value: 'all' },
  { label: '最新', value: 'latest' },
  { label: '热门', value: 'hot' },
  { label: '精华', value: 'featured' }
]

const fetchPosts = async () => {
  loading.value = true
  try {
    const response = await apiService.getPosts(currentFilter.value)
    if (response.success) {
      posts.value = response.data
    } else {
      ElMessage.error(response.message || '获取帖子列表失败')
    }
  } catch (error) {
    ElMessage.error('获取帖子列表失败，请稍后重试')
  } finally {
    loading.value = false
  }
}

const handleCreatePost = () => {
  if (!localStorage.getItem('token')) {
    ElMessage.warning('请先登录后再发布帖子')
    router.push('/login')
    return
  }
  // TODO: 实现发帖功能
  ElMessage.info('发帖功能开发中...')
}

const handleFilterChange = (filter) => {
  currentFilter.value = filter
  fetchPosts()
}

const handleLike = async (post) => {
  if (!localStorage.getItem('token')) {
    ElMessage.warning('请先登录后再点赞')
    router.push('/login')
    return
  }

  try {
    const response = await apiService.likePost(post.id)
    if (response.success) {
      post.likes++
      ElMessage.success('点赞成功')
    } else {
      ElMessage.error(response.message || '点赞失败')
    }
  } catch (error) {
    ElMessage.error('点赞失败，请稍后重试')
  }
}

const handleComment = (post) => {
  if (!localStorage.getItem('token')) {
    ElMessage.warning('请先登录后再评论')
    router.push('/login')
    return
  }
  // TODO: 实现评论功能
  ElMessage.info('评论功能开发中...')
}

const handleShare = (post) => {
  // TODO: 实现分享功能
  ElMessage.info('分享功能开发中...')
}

onMounted(() => {
  fetchPosts()
})
</script> 